import './index.less'

import { Icon, Menu, Dropdown } from 'ant-design-vue'
import { i18nRender } from '@/locales'
import i18nMixin from '@/store/i18n-mixin'

import { getInfo } from '@/api/data'

//  TO-DO: 2021-01-05 
// 此处的 languageObj 对象需要请求数据处理得来

console.log("到达此处了,选项部分的处理，测试前序后续问题-langInfo-");

let languageObj = {
  locales: ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'],
  languageLabels: {
    'zh-CN': '简体中文',
    'zh-TW': '繁体中文',
    'en-US': 'English',
    'pt-BR': 'Português'
  },
  languageIcons: {
    'zh-CN': '🇨🇳',
    'zh-TW': '🇭🇰',
    'en-US': '🇺🇸',
    'pt-BR': '🇧🇷'
  }
}

const locales = languageObj.locales
const languageLabels = languageObj.languageLabels
const languageIcons = languageObj.languageIcons

const SelectLang = {
  props: {
    langInfo:{
      type: Object
    },
    prefixCls: {
      type: String,
      default: 'ant-pro-drop-down'
    }
  },
  name: 'SelectLang',
  mixins: [i18nMixin],
  render () {

    console.log("-tmd-langInfo-语言的类型-this.langInfo-", this.langInfo);
    
    // 数据过滤处理开始 --- start ---
    /*
      语言列表示例：
      "languages": [
        {
          "cultureName": "en",
          "uiCultureName": "en",
          "displayName": "English",
          "flagIcon": null
        },
        {
          "cultureName": "zh-Hans",
          "uiCultureName": "zh-Hans",
          "displayName": "简体中文",
          "flagIcon": null
        }
      ]
    */
   let tempLocales = [];
   let tempLanguageLabels = {};
   let tempLanguageIcons = {};
    this.langInfo.localization.languages.map((item)=>{
      // 创建 - locales
      tempLocales.push(item.cultureName)
      // 创建 - languageLabels
      tempLanguageLabels[item.cultureName] = item.displayName
      // 创建 - languageIcons
      tempLanguageIcons[item.cultureName] = item.uiCultureName
    }) 
    // const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR']
    // const languageLabels = { 'zh-CN': '简体中文', 'zh-TW': '繁体中文', 'en-US': 'English', 'pt-BR': 'Português'}
    // const languageIcons = { 'zh-CN': '🇨🇳', 'zh-TW': '🇭🇰', 'en-US': '🇺🇸', 'pt-BR': '🇧🇷'}
    const locales = tempLocales
    const languageLabels = tempLanguageLabels
    const languageIcons = tempLanguageIcons
    // 数据过滤处理结束 --- end ---


    const { prefixCls } = this
    const changeLang = ({ key }) => {
      this.setLang(key)
    }
    const langMenu = (
      <Menu class={['menu', 'ant-pro-header-menu']} selectedKeys={[this.currentLang]} onClick={changeLang}>
        {locales.map(locale => (
          <Menu.Item key={locale}>
            {languageLabels[locale]}
            {' '}
            <span role="img" aria-label={languageLabels[locale]}>
              {languageIcons[locale]}
            </span>
          </Menu.Item>
        ))}
      </Menu>
    )
    return (
      <Dropdown overlay={langMenu} placement="bottomRight">
        <span class={prefixCls}>
          <Icon type="global" title={i18nRender('navBar.lang')} />
        </span>
      </Dropdown>
    )
  }
}

export default SelectLang
